<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考核管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../library/layui/css/layui.css" media="all">       <!-- layui依赖 -->
    <script type="text/javascript" src="../../library/layui/layui.js"></script>
    <script src="../../lib/axios.min.js"></script>                                     <!-- axios-->
    <script src="../../lib/vue.min.js"></script>                                       <!--vue依赖 -->
    <link rel="stylesheet" href="../../library/element-ui/lib/theme-chalk/index.css">  <!--elementui依赖 -->
    <script src="../../library/element-ui/lib/index.js"></script>
    <script src="./index.js" defer></script>                                           <!-- 使用 defer 确保在 DOM 加载后执行 -->
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            height: 650px;
            position: relative; /* 使aside相对定位 */
        }

        .el-main {
            background-color: #E9EEF3;
            color: #444;
            text-align: center;
            line-height: 160px;
        }

        .el-table__header-wrapper {
            height: 0;   /*消除列名占用空间*/
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-table
                        ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        @row-click="whenClick"
                        style="width: 100%">
                    <el-table-column
                            prop="CNAME"
                            label="菜单"
                            width="200px">
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
                    <el-button @click="setCurrent()">取消选择</el-button>
                </div>
            </el-aside>
            <el-main>
                <el-button @click="openDrawer" type="primary" style="margin-left: 16px;">
                    点我打开
                </el-button>

                <el-drawer
                        title="二级菜单"
                        :visible.sync="drawer"
                        :with-header="false"
                        :append-to-body="false"
                        direction="right">
                    <div v-if="selectedMenu">
                        <h3>{{ selectedMenu.CNAME }} 的二级菜单</h3>
                        <ul>
                            <li v-for="item in selectedMenu.subMenu" :key="item.id">{{ item.name }}</li>
                        </ul>
                    </div>
                    <div v-else>
                        <span>请先选择一个菜单项</span>
                    </div>
                </el-drawer>
            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                drawer: false,
                selectedMenu: null,
                tableData: [
                    { CNAME: '菜单1', subMenu: [{ id: 1, name: '子菜单1-1' }, { id: 2, name: '子菜单1-2' }] },
                    { CNAME: '菜单2', subMenu: [{ id: 3, name: '子菜单2-1' }, { id: 4, name: '子菜单2-2' }] },
                    { CNAME: '菜单3', subMenu: [{ id: 5, name: '子菜单3-1' }, { id: 6, name: '子菜单3-2' }] }
                ]
            };
        },
        methods: {
            setCurrent(row) {
                this.selectedMenu = row; // 设置当前选中的菜单
            },
            openDrawer() {
                if (this.selectedMenu) {
                    this.drawer = true; // 打开抽屉
                } else {
                    this.$message.warning('请先选择一个菜单项'); // 提示用户选择菜单
                }
            },
            handleCurrentChange(row) {
                // 处理当前行变化的逻辑
                this.selectedMenu = row; // 更新选中的菜单
            },
            whenClick(row) {
                // 处理行点击的逻辑
                this.selectedMenu = row; // 更新选中的菜单
            }
        }
    });
</script>
</body>
</html>
